<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作对象</title>
    <!--    引入jquery-->
    <script src="../../js/jquery-3.3.1.js"></script>
</head>
<body>
<div id="my_div">
</div>
<div id="my_div2">
    你好，世界
</div>
<button id="my_btn1">点击试试</button>
<hr>
<div id="my_div3">我是div3</div>
<div id="my_div4">我是div4</div>
<button id="my_btn2">点击试试</button>

<hr>
<div id="my_div5">我是div5</div>
<div id="my_div6">我是div6</div>
<button id="my_btn3">点击试试</button>

<hr>
<div id="my_div7">我是div7</div>
<div id="my_div8">我是div8</div>
<button id="my_btn4">点击试试</button>
<button id="my_btn5">再点击试试</button>

<hr>
<div id="my_div9">我是div9</div>
<button id="my_btn6">点击试试</button>
<button id="my_btn7">再点击试试</button>

</body>
<script>

    let hello_jquery = $('<h1>你好，jquery</h1>');

    /**
     * 1.从尾部加入元素。
     * 格式 ：容器.append
     * 容器.append($('需要添加的元素'))
     * 容器对象必须存在（dom）
     */
    $('#my_div').append(hello_jquery)


    /**2
     * 前者：要存的容器
     * 后者：要存的数据
     */
    $('#my_btn1').click(function () {
        $('#my_div').appendTo($('#my_div2'))
    })


    /**
     * 添加者.prepend(xxx)
     *
     */
    $('#my_btn2').click(function (){
        $('#my_div3').prepend($('#my_div4'))
    })

    /**
     * 被添加者的数据丢到prependTo的头上
     * a------------->b
     */
    $('#my_btn3').click(function (){
        $('#my_div6').prependTo($('#my_div5'))
    })


    /**
     * before
     * 格式：$('添加者').before($('被添加者'))
     */

    $('#my_btn4').click(function (){
        $('#my_div7').before($('#my_div8'))
    })
    $('#my_btn5').click(function (){
        $('#my_div7').after($('#my_div8'))
    })

    /**
     * remove
     * 删除
     */
    $('#my_btn6').click(function (){
        $('#my_div9').remove()
    })
    $('#my_btn7').click(function (){
        $('#my_div9').empty()
    })

</script>
</html>